<!DOCTYPE html>
<html>
  <head>
    <!--[if lt IE 9]>
    <script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <meta charset="UTF-8">
    <link rel="stylesheet" href="assets/site.css">
    <script src="assets/demo.js"></script>
  </head>
  <body>
    <div class="container header">
      <h1>
        EICON
         <small>font demo</small>
      </h1>
    </div>
    <div id="icons" class="container">
        <h2>
            Icons
        </h2>
        <div class="row">
            <script>
                writeFonts();
            </script>
        </div>
        <h2>
            Font Utility
        </h2>
        <div>
            <h3>
                Sizes
            </h3>
            <span class="ui-icon-toggle-left ui-eicons-small"></span> <label>Small</label>
            <span class="ui-icon-toggle-left ui-eicons-medium"></span> <label>Medium</label>
            <span class="ui-icon-toggle-left ui-eicons-large"></span> <label>Large</label>
            <h3>
                Spin
            </h3>
            <span class="ui-icon-spinner ui-eicons-spin ui-eicons-large"></span>
            <h3>
                Rotate
            </h3>
            <span class="ui-icon-toggle-left ui-eicons-large"></span>
            <span class="ui-eicons-rotate-90 ui-icon-toggle-left ui-eicons-large"></span>
            <span class="ui-eicons-rotate-180 ui-icon-toggle-left ui-eicons-large"></span>
            <span class="ui-eicons-rotate-270 ui-icon-toggle-left ui-eicons-large"></span>
            <h3>
                Horizontal Flip
            </h3>
            <span class="ui-icon-toggle-left ui-eicons-large"></span>
            <span class="ui-icon-toggle-left ui-eicons-large ui-eicons-flip-horizontal"></span>
            <h3>
                Vertical Flip
            </h3>
            <span class="ui-icon-sort-desc ui-eicons-large"></span>
            <span class="ui-icon-sort-desc ui-eicons-large ui-eicons-flip-vertical"></span>
            
        </div>
    </div>
    <div class="container footer">EICONS</div>
  </body>
</html>